<!-- 模板 -->
<template>
  <div class="register">
    <!-- 1.头部 -->
    <div class="header">
      <van-icon
        name="arrow-left"
        class="head-left-icon"
        @click="$router.go(-1)"
      />
    </div>
    <!-- 2.表单 -->
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="用户名"
          label="CN+86 "
          placeholder="请输入手机号码"
          :rules="rules.phone"
        />
        <van-field
          v-model="sms"
          center
          placeholder="请输入短信验证码"
          :rules="rules.sms"
        >
          <template #button>
            <span @click="securityCode" ref="sms">发送验证码</span>
          </template>
        </van-field>
        <van-field
          v-model="password"
          type="password"
          placeholder="输入密码"
          :rules="rules.password"
        />
        <van-field
          v-model="passwords"
          type="password"
          placeholder="确认密码"
          :rules="rules.passwords"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>
      <div class="text">
        注册即代表同意
        <a href="##">《用户协议》</a>
        和<a href="##">《隐私政策》</a>
      </div>
    </div>
    <div class="footer">
      已有账号 <a href="##" @click="$router.push('/')">立即登录</a>
    </div>
    <!-- 5.弹出框 -->
    <div class="msg" v-show="show">
      <van-icon :name="iconName" />{{ message }}
    </div>
  </div>
</template>
<script>
import request from "../utils/request.js";
// import { Toast } from "vant";
export default {
  // name: '',
  data() {
    return {
      phone: "",
      password: "",
      passwords: "",
      sms: "",
      id: null,
      count: 60,
      message: "",
      show: false,
      iconName: "fail",
      rules: {
        phone: [
          { required: true, message: "电话不能为空" },
          { pattern: /^1[3-9]\d{9}$/, message: "非法的电话号码" },
        ],
        sms: [
          { required: true, message: "验证码不能为空" },
          {
            validator: (val) => {
              let sms = sessionStorage.getItem("sms");
              console.log(sms);
              if (!sms) {
                return false;
              }
              if (val !== sms) {
                console.log(111);
                return false;
              }
            },
            message: "验证码不正确",
          },
        ],
        password: [
          { required: true, message: "请填写密码" },
          { pattern: /^\w{6,12}$/, message: "密码数字字母下划线6-12位" },
        ],
        passwords: [
          { required: true, message: "请再次填写密码" },
          {
            validator: (val) => {
              if (val !== this.password) {
                console.log(111);
                return false;
              }
            },
            message: "两次密码输入不一样",
          },
        ],
      },
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //生成验证码
    getCode() {
      let str = "0123456789";
      let num = "";
      for (let i = 0; i < 6; i++) {
        let index = Math.floor(Math.random() * 10);
        num += str[index];
      }
      console.log(num);
      sessionStorage.setItem("sms", num);
    },
    // 发送验证码
    securityCode() {
      if (this.id) {
        clearInterval(this.id);
      } else {
        this.getCode();
      }
      this.id = setInterval(() => {
        this.$refs.sms.innerHTML = "还剩" + this.count + "秒";
        this.count--;
        if (this.count === 0) {
          clearInterval(this.id);
          this.$refs.sms.innerHTML = "获取验证码";
          this.count = 60;
        }
      }, 1000);
    },
    // 点击注册
    onSubmit() {
      this.register();
    },
    //注册请求方法
    async register() {
      // 准备参数
      let options = {
        url: "users/register",
        type: "post",
        data: {
          phone: this.phone,
          userPassword: this.password,
        },
      };
      try {
        let { data: res } = await request(options);
        console.log(res.meta.status);
        // console.log(this.$Toast);
        if (res.meta.status !== 200) {
          this.iconName = "fail";
          this.message = res.meta.msg;
          this.show = true;
          setTimeout(() => {
            this.show = false;
          }, 2000);
          return;
          // return Toast.fail(res.meta.msg);
        }
        // 注册成功
        console.log(res);
        // this.iconName = "success";
        // this.message = res.meta.msg;
        // this.show = true;
        // setTimeout(() => {
        //   this.show = false;
        // }, 2000);
        // Toast.success(res.meta.msg);
        // 编程式路由
        this.$router.push("/");
      } catch (err) {
        console.log(err);
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.register {
  margin-top: 0.88rem;
  line-height: 1.5;
  .header {
    position: fixed;
    width: 100%;
    height: 0.88rem;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 999;
    .head-left-icon {
      padding-left: 0.2rem;
      font-size: 0.5rem;
      color: #aaa;
    }
  }
  .form {
    margin-top: 1.4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /deep/.van-cell {
      &::after {
        border: none;
      }
    }
    .van-form {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      .van-field {
        width: 5.54rem;
        border-radius: 3px;
        margin-bottom: 0.3rem;
        font-size: 14px;
        // position: relative;
        overflow: visible;
        padding: 0;
        /deep/.van-field__label {
          height: 0.88rem;
          background: #f8f8f8;
          width: 1.9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin-right: 0;
          span {
            font-size: 0.28rem;
            color: #000;
          }
          &::after {
            position: absolute;
            left: 100%;
            content: "";
            display: block;
            width: 1px;
            height: 0.4rem;
            background: #000;
          }
        }
        /deep/.van-field__body {
          background: #f8f8f8;
          height: 0.88rem;
          font-size: 0.28rem;
          color: #afafaf;
          padding: 0 0.2rem;
        }
        /deep/.van-field__error-message {
          padding: 0 0.2rem;
          margin-top: 0.2rem;
          font-size: 0.24rem;
        }
        /deep/.van-field__button {
          width: 2rem;
          height: 100%;
          margin-right: -0.2rem;
          span {
            display: block;
            background: transparent;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
            color: #ffbe4a;
          }
        }
      }
      .van-button {
        font-size: 0.36rem;
        width: 5.54rem;
        border-radius: 3px;
        height: 1rem;
      }
    }
    .text {
      width: 5.54rem;
      color: #b1b1b1;
      font-size: 0.24rem;
      display: flex;
      justify-content: center;
      a {
        color: #000;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0.48rem;
    display: flex;
    width: 100%;
    font-size: 0.28rem;
    justify-content: center;
    a {
      padding-left: 0.1rem;
      color: #ffbe4a;
    }
  }
  .msg {
    padding: 0.2rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0.2rem;
    color: #fff;
    font-size: 0.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .van-icon {
      font-size: 0.4rem;
      color: #fff;
      margin-bottom: 0.1rem;
    }
  }
}
</style>
